<template>
  <div class="pop-common">
    <el-dialog
      v-model="opt.isShow"
      :title="opt.title"
      :width="opt.width ? opt.width : '30%'"
      center
      destroy-on-close
      :close-on-click-modal="false"
      :before-close="handleCloseClick"
    >
      <section class="propCls">
        <el-form ref="formRef" :model="formData.data">
          <template v-for="(item, index) in formData.data" :key="index">
            <el-form-item v-if="item.type == 'date-picker'" label="生效时间:">
              <el-date-picker
                style="width: 100%"
                v-model="item.value"
                type="datetime"
                placeholder="请选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item v-if="item.type === 'input'" :label="item.label ?? ''">
              <el-input v-model="item.value" :placeholder="item.placeholder" />
            </el-form-item>
          </template>
        </el-form>
      </section>

      <section>
        <div class="model-footer">
          <el-button @click="handleCloseClick()">取消</el-button>
          <el-button type="primary" @click="handleConfirmClick">确定</el-button>
        </div>
      </section>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { watch } from 'vue'

const props = defineProps<{ opt: any }>()

const emits = defineEmits(['confirm', 'cancel'])

const formRef = ref<FormInstance>()
const formData = ref<any>({})
const handleClearClick = () => {
  formRef.value?.resetFields()
  formData.value.data.map((item: any) => {
    item.value = null
  })
}
const handleConfirmClick = () => {
  emits('confirm', formData)
}
const handleCloseClick = () => {
  emits('cancel')
  handleClearClick()
}
watch(props.opt, () => {
  if (props.opt.isShow) {
    formData.value = props.opt
  }
})
defineExpose({ handleClearClick })
</script>

<style lang="less" scoped>
.pop-common {
  .propCls {
    .el-form-item {
      margin-bottom: 30px;
    }
  }
  .model-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 35px;
    margin-top: 30px;
    .el-button {
      padding: 0 20px;
    }
  }
  .fishingProp {
    background-color: #f7fafd;
  }
  .selectCls {
    margin-top: 20px;
    .propItem {
      padding: 5px 10px;
      margin-right: 20px;
      background-color: #f7fafd;
    }
  }
}
</style>
